<template>
  <div class="abnormal-container">
    <!-- 搜索区域 -->
    <div class="search-panel">
      <div class="search-row">
        <div class="search-item">
          <span class="label">时间</span>
          <el-date-picker v-model="searchParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" class="custom-date-picker" />
        </div>
         <div class="search-item">
          <span class="label">产线</span>
          <el-select v-model="searchParams.prodLine" placeholder="请选择" clearable class="custom-select" style="width: 100px;">
            <el-option label="TCM2" value="TCM2" />
            <el-option label="TCM1" value="TCM1" />
          </el-select>
        </div>
        <div class="search-item">
          <span class="label">处理代码</span>
          <el-select v-model="searchParams.processCode" placeholder="请选择" clearable class="custom-select" style="width: 100px;">
             <el-option label="转订单" value="转订单" />
             <el-option label="合原订单" value="合原订单" />
          </el-select>
        </div>
        <div class="search-item">
          <span class="label">缺陷代码</span>
          <el-select v-model="searchParams.defectCode" placeholder="请选择" clearable class="custom-select" style="width: 100px;">
             <el-option label="代码A" value="A" />
             <el-option label="代码B" value="B" />
          </el-select>
        </div>
         <div class="search-item">
          <span class="label">模式选择</span>
          <el-select v-model="searchParams.modeSelect" placeholder="请选择" clearable class="custom-select" style="width: 100px;">
             <el-option label="模式1" value="1" />
             <el-option label="模式2" value="2" />
          </el-select>
        </div>
         <div class="search-actions">
          <button class="btn query-btn" @click="handleSearch">查询</button>
          <button class="btn reset-btn" @click="handleReset">重置</button>
          <button class="btn export-btn">导出</button>
        </div>
      </div>
      <div class="search-row">
         <div class="search-item">
          <span class="label">出口卷号</span>
          <el-input v-model="searchParams.exportRollNo" placeholder="请输入" class="custom-input" style="width: 260px;"/> 
        </div>
         <div class="search-item">
          <span class="label">主缺陷描述</span>
          <el-input v-model="searchParams.mainDefectDesc" placeholder="请输入" class="custom-input" />
        </div>
         <div class="search-item">
          <span class="label">厚度</span>
          <el-input v-model="searchParams.thickness" placeholder="请输入" class="custom-input" style="width: 120px;"/>
        </div>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-panel">
      <el-table
        :data="pagedTableData"
        style="width: 100%;"
        height="100%"
        border
        highlight-current-row
        :cell-class-name="tableCellClassName" 
        :header-cell-style="{ background: '#2a5caa', color: '#fff', padding: '8px 10px', textAlign: 'center', fontWeight: 'normal', border: 'none' }"
        :cell-style="{ padding: '8px 10px', textAlign: 'center', color: '#c0c4cc', border: 'none' }"
        :row-style="{ background: '#0f2142' }"
      >
        <el-table-column type="index" label="序号" width="70" align="center" :index="indexMethod" fixed="left" />
        <el-table-column prop="prodLine" label="产线" width="80" align="center" />
        <el-table-column prop="exportRollNo" label="出口卷号" width="140" align="center" />
        <el-table-column prop="steelGrade" label="钢种" width="100" align="center" />
        <el-table-column prop="exportWidth" label="出口宽度[mm]" width="120" align="center" />
        <el-table-column prop="exportThickness" label="出口厚度[m]" width="120" align="center" />
        <el-table-column prop="exportWeight" label="出口重量[kg]" width="120" align="center" />
        <el-table-column prop="processCode" label="处理代码" width="100" align="center" />
        <el-table-column prop="mainDefectCode" label="主缺陷代码" width="100" align="center" />
        <el-table-column prop="mainDefectDesc" label="主缺陷描述" min-width="200" align="left" /> 
        <el-table-column prop="defectCodeHead" label="缺陷代码(头部)" width="120" align="center" />
        <el-table-column label="分析" width="200" fixed="right" align="center">
           <template #default>
             <button class="action-btn thickness-analysis-btn">厚度分析</button>
             <button class="action-btn shape-analysis-btn">板形分析</button>
           </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-panel">
       <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import type { TableColumnCtx } from 'element-plus';

// --- Interfaces --- 
interface SearchParams {
  dateRange: Date[];
  prodLine: string;
  processCode: string;
  defectCode: string;
  modeSelect: string;
  exportRollNo: string;
  mainDefectDesc: string;
  thickness: string;
}

interface TableRow {
  id: number;
  prodLine: string;
  exportRollNo: string;
  steelGrade: string;
  exportWidth: number;
  exportThickness: number;
  exportWeight: number;
  processCode: string;
  mainDefectCode: string; 
  mainDefectDesc: string;
  defectCodeHead: number | string; 
}

// --- Reactive State --- 
const searchParams = reactive<SearchParams>({
  dateRange: [],
  prodLine: '',
  processCode: '',
  defectCode: '',
  modeSelect: '',
  exportRollNo: '',
  mainDefectDesc: '',
  thickness: ''
});

// --- Mock Table Data --- 
const allTableData = ref<TableRow[]>(Array.from({ length: 29 }, (_, i) => {
  const isLongDesc = i % 4 === 0;
  const headDefect = i % 5 === 2 ? 19 : (i % 7 === 3 ? 12 : Math.floor(Math.random() * 10));
  return {
    id: i + 1,
    prodLine: 'TCM2',
    exportRollNo: `L12502${String(63500 + i * 17).slice(-5)}`,
    steelGrade: i % 3 === 0 ? 'SPHE-T' : (i % 4 === 1 ? 'SPHC-ZH' : 'SPHC-LT'),
    exportWidth: i % 6 === 0 ? 1075 : 1250 + (i % 5 - 2) * 10,
    exportThickness: parseFloat((2.017 - i * 0.05 + Math.random() * 0.1).toFixed(3)),
    exportWeight: 16625 + Math.floor(Math.random() * 500 - 250),
    processCode: i % 2 === 0 ? '合原订单' : '转订单',
    mainDefectCode: `DEF${String(100 + i % 10).padStart(3, '0')}`,
    mainDefectDesc: isLongDesc ? '卷芯约60米厚度波动大，库存卷' : '换辊第一卷，卷芯约50米厚度波动',
    defectCodeHead: headDefect,
  };
}));

// --- Pagination --- 
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: allTableData.value.length
});

const pagedTableData = computed(() => {
  const start = (pagination.currentPage - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  return allTableData.value.slice(start, end);
});

const indexMethod = (index: number) => {
  return (pagination.currentPage - 1) * pagination.pageSize + index + 1;
};

const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  pagination.currentPage = 1;
};

const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
};

// --- Table Cell Styling --- 
interface CellClassNameParams {
  row: TableRow;
  column: TableColumnCtx<TableRow>;
  rowIndex: number;
  columnIndex: number;
}
const tableCellClassName = ({ row, column, rowIndex, columnIndex }: CellClassNameParams) => {
    console.log(rowIndex, columnIndex);
  if (column.property === 'defectCodeHead' && typeof row.defectCodeHead === 'number' && row.defectCodeHead >= 10) {
    return 'red-text';
  }
  return '';
};

// --- Handlers --- 
const handleSearch = () => {
  console.log('查询参数:', searchParams);
};

const handleReset = () => {
  Object.keys(searchParams).forEach(key => {
    const typedKey = key as keyof SearchParams;
    if (typedKey === 'dateRange') {
      searchParams[typedKey] = [];
    } else {
      searchParams[typedKey] = '';
    }
  });
  console.log('重置参数');
};

</script>

<style scoped>
/* --- Container and Base Styles (Consistent with others) --- */
.abnormal-container {
  background-color: #0a1a3a;
  color: #c0c4cc;
  padding: 15px;
  height: 100%; 
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
  font-size: 13px;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: #3a5a8a #142a52;
  display: flex;
  flex-direction: column;
}

.abnormal-container > *:not(:last-child) {
  margin-bottom: 15px;
}

/* --- Search Panel Styles (Consistent) --- */
.search-panel {
  background-color: #1c2d5a;
  padding: 10px 15px;
  border-radius: 3px;
  flex-shrink: 0;
}
.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.search-row:last-child { margin-bottom: 0; }
.search-item {
  display: flex;
  align-items: center;
  margin-right: 15px; 
  margin-bottom: 10px; 
}
.label { 
  color: #c0c4cc;
  margin-right: 8px;
  white-space: nowrap;
  min-width: 75px; /* Adjusted min-width slightly for longer labels */
  text-align: right; 
}
:deep(.custom-date-picker.el-date-editor) {
  width: 260px !important; 
  height: 28px;
  background-color: #0a1a3a;
  border: 1px solid #3a5a8a;
  box-shadow: none;
}
/* ... other date picker deep styles ... */
:deep(.custom-date-picker .el-range-input), :deep(.custom-date-picker .el-range-separator) { color: #c0c4cc; font-size: 13px; height: 26px; line-height: 26px; }
:deep(.custom-date-picker .el-range-separator) { padding: 0; }
:deep(.custom-date-picker .el-input__icon) { line-height: 28px; color: #c0c4cc; }

.custom-input,
.custom-select,
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) { 
  height: 28px;
  line-height: 28px;
  background-color: #0a1a3a !important;
  border: 1px solid #3a5a8a !important;
  border-radius: 3px !important;
  color: #c0c4cc !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
:deep(.el-input__inner) { color: #c0c4cc !important; height: 26px !important; line-height: 26px !important; }
:deep(.custom-select .el-select__placeholder), 
:deep(.custom-select .el-select__caret) { color: #c0c4cc; }

.custom-input { width: 150px; }
.custom-select { width: 120px; }

.search-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-left: 20px; 
}
.btn {
  height: 28px;
  padding: 0 15px;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  margin-left: 10px;
  color: #fff;
}
.query-btn { background-color: #2979ff; }
.query-btn:hover { background-color: #5393ff; }
.reset-btn { background-color: #3a5a8a; }
.reset-btn:hover { background-color: #5a7aa4; }
.export-btn { background-color: #2979ff; }
.export-btn:hover { background-color: #5393ff; }

/* --- Table Panel Styles (Consistent) --- */
.table-panel {
  background-color: #1c2d5a;
  padding: 5px;
  border-radius: 3px;
  overflow: hidden;
  flex-grow: 1;
  min-height: 0;
  display: flex;
}
/* ... Deep table styles ... */
:deep(.el-table) { background-color: transparent; --el-table-border-color: #3a5a8a; --el-table-header-bg-color: #2a5caa; --el-table-header-text-color: #fff; --el-table-tr-bg-color: #0f2142; --el-table-row-hover-bg-color: #183153; --el-table-text-color: #c0c4cc; --el-table-border: none; --el-table-header-border-radius: 0; }
:deep(.el-table__header-wrapper th.el-table__cell) { background-color: var(--el-table-header-bg-color) !important; color: var(--el-table-header-text-color); padding: 8px 10px; text-align: center; font-weight: normal; border: none; }
:deep(.el-table--group th.el-table__cell) { border: none; }
:deep(.el-table__header) { border-bottom: none; }
:deep(.el-table__body td.el-table__cell) { padding: 8px 10px; text-align: center; color: var(--el-table-text-color); border: none; background-color: var(--el-table-tr-bg-color); }
:deep(.el-table__body tr.el-table__row--striped td.el-table__cell) { background-color: var(--el-table-tr-bg-color); }
:deep(.el-table__body tr.current-row > td.el-table__cell) { background-color: #263451 !important; color: #fff !important; }
:deep(.el-table__body tr.selected-row > td.el-table__cell) { background-color: #263451 !important; color: #fff !important; }
:deep(.el-table__cell.el-table-column--fixed-right) { background-color: #0f2142 !important; }
:deep(.el-table__header-wrapper th.el-table-column--fixed-right) { background-color: #2a5caa !important; }
:deep(.el-table__body tr.current-row > td.el-table-column--fixed-right), :deep(.el-table__body tr.selected-row > td.el-table-column--fixed-right) { background-color: #263451 !important; }

/* Custom cell style for red text */
.red-text {
  color: #ff4d4f !important; 
  font-weight: bold;
}
:deep(.el-table__cell.red-text) {
  color: #ff4d4f !important; 
  font-weight: bold;
}

/* Table Action Buttons */
.action-btn {
  padding: 3px 8px;
  font-size: 12px;
  border: none;
  border-radius: 3px;
  margin: 0 3px; /* Slightly more margin */
  cursor: pointer;
  color: #fff;
}
.thickness-analysis-btn { background-color: #67c23a; } /* Green */
.thickness-analysis-btn:hover { background-color: #85ce61; }
.shape-analysis-btn { background-color: #e6a23c; } /* Yellow */
.shape-analysis-btn:hover { background-color: #ebb563; }

:deep(.el-table__body-wrapper) { scrollbar-width: thin; scrollbar-color: #3a5a8a #142a52; }
:deep(.el-table__body-wrapper::-webkit-scrollbar) { width: 8px; height: 8px; }
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) { background: #142a52; border-radius: 4px; }
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) { background-color: #3a5a8a; border-radius: 4px; border: 2px solid #142a52; }
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) { background-color: #5a7aa4; }

/* --- Pagination Panel Styles (Consistent) --- */
.pagination-panel { background-color: #1c2d5a; padding: 8px 15px; border-radius: 3px; display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; }
/* ... Deep pagination styles ... */
:deep(.el-pagination) { padding: 0; --el-pagination-bg-color: #0a1a3a; --el-pagination-text-color: #c0c4cc; --el-pagination-button-disabled-bg-color: #183153; --el-pagination-button-color: #c0c4cc; --el-pagination-button-disabled-color: #6c757d; --el-pagination-hover-color: #5393ff; --el-color-primary: #2979ff; --el-disabled-bg-color: #183153; }
:deep(.el-pagination__total) { color: var(--el-pagination-text-color); margin-right: 15px; }
:deep(.el-pagination__sizes .el-select .el-input__wrapper) { height: 28px; line-height: 28px; background-color: #0a1a3a !important; border: 1px solid #3a5a8a !important; border-radius: 3px !important; color: var(--el-pagination-text-color) !important; box-shadow: none !important; font-size: 13px !important; width: 100px; }
:deep(.el-pagination__sizes .el-select .el-input__inner) { color: var(--el-pagination-text-color) !important; height: 26px !important; line-height: 26px !important; }
:deep(.el-pagination__sizes .el-select .el-select__caret) { color: var(--el-pagination-text-color); }
:deep(.el-pagination button), :deep(.el-pager li) { min-width: 28px; height: 28px; padding: 0 8px; margin: 0 3px; background-color: var(--el-pagination-bg-color); border: 1px solid #3a5a8a; border-radius: 3px; color: var(--el-pagination-button-color); font-size: 13px; }
:deep(.el-pager li.is-active) { background-color: var(--el-color-primary); border-color: var(--el-color-primary); color: #fff; }
:deep(.el-pagination button:disabled) { background-color: var(--el-pagination-button-disabled-bg-color); color: var(--el-pagination-button-disabled-color); border-color: #3a5a8a; opacity: 0.7; }
:deep(.el-pager li:hover) { color: var(--el-pagination-hover-color); border-color: var(--el-pagination-hover-color); }
:deep(.el-pagination button:not(:disabled):hover) { color: var(--el-pagination-hover-color); border-color: var(--el-pagination-hover-color); }
:deep(.el-pagination__jump) { color: var(--el-pagination-text-color); margin-left: 15px; }
:deep(.el-pagination__jump .el-input__wrapper) { height: 28px; line-height: 28px; background-color: #0a1a3a !important; border: 1px solid #3a5a8a !important; border-radius: 3px !important; color: var(--el-pagination-text-color) !important; box-shadow: none !important; font-size: 13px !important; width: 40px; padding-left: 8px; padding-right: 8px; text-align: center; }
:deep(.el-pagination__jump .el-input__inner) { color: var(--el-pagination-text-color) !important; height: 26px !important; line-height: 26px !important; text-align: center; }

</style>
